<template>
  <transition name="slide">
    <div class="rating_page">
      <head-top head-title="下载" :go-back='true'></head-top>
      <section class="dowload_container">
        <img src='../../images/elmlogo.jpeg' class="logo_img">
        <p>下载饿了么APP</p>
      </section>
      <!--按钮直接绑定在button上，事件无效-->
      <div class="btn" @click.stop="download">
        <button  class="yd-btn-block yd-btn-primary">下载</button>
      </div>
    </div>
  </transition>
</template>

<script type="text/ecmascript-6">
  import headTop from 'components/header/head'
  export default {
    data(){
      return{
        system:''
      }
    },
    created(){
      this.checkSystem();
    },
    methods: {
      download(){
        //如果是ios用户则提示，否则直接下载
        if( this.system == 'IOS'){
          this.$dialog.alert({mes: 'IOS用户请前往AppStore下载！'});
        }else{
          try {
            let elemIF = document.createElement("iframe");
            elemIF.src = 'http://cangdu.org/files/elm.apk';
            elemIF.style.display = "none";
            document.body.appendChild(elemIF);
          } catch (e) {
            this.$dialog.alert({mes: '下载失败！'});
          }
        }

      },
      checkSystem(){
        let u = navigator.userAgent;
        let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
        let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        if (isAndroid) {
          this.system = 'Android';
        } else if (isIOS) {
          this.system = 'IOS';
        } else {
          this.system = 'pc';
        }
      }
    },
    components:{
      headTop
    }
  }
</script>
<style scoped lang="scss" rel="stylesheet/scss">
  @import '../../../src/style/mixin';
  .rating_page{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 202;
    background:#f2f2f2;
    padding-top: 1.95rem;
  }
  .btn{
    padding:0 0.5rem;
    margin:0.5rem auto;
  }
  .dowload_container{
    text-align: center;
    .logo_img{
      display: inline-block;
      border-radius: 1rem;
      margin-top: 1rem;
    }
    p{
      @include sc(.8rem, #666);
      margin-bottom: 1rem;
    }
    .determine{
      background-color: #4cd964;
      @include sc(.7rem, #fff);
      text-align: center;
      margin: 0 .7rem;
      line-height: 1.8rem;
      border-radius: 0.2rem;
      margin-top: 0.5rem;
    }
  }
</style>
